<template>
  <view class="all1">
    <view class="input">
      <view style="display: flex; align-items: center;margin-bottom: 30rpx;">
        <!--        <view class="">搜索内容：</view>-->
        <!--        <u&#45;&#45;input placeholder="请输入内容" border="surround" v-model="value"></u&#45;&#45;input>-->
        <u-search placeholder="请输入搜索内容" v-model="value" @change="changkeyword" @search="onQuery"
                  :showAction="false" bgColor="#fff"></u-search>
        <u-button icon="plus" text="新增"
                  style="width: 120rpx;height: 68rpx; border-radius: 68rpx; margin-left: 10rpx;"
                  @click="showDrawer1('showLeft')"></u-button>
      </view>
<!--      <view style="display: flex;margin: 30rpx -150rpx;">-->
<!--        <u-button type="primary" icon="search" text="搜索" style="width: 200rpx;" @click="onQuery"></u-button>-->
<!--        <u-button type="success" icon="plus" text="新增" style="width: 200rpx;"-->
<!--                  @click="showDrawer1('showLeft')"></u-button>-->
<!--      </view>-->
      <!-- <button @click="submitForm">Submit</button> -->

      <uni-drawer ref="showLeft" mode="left" :width="320">
        <view class="close">
          <button @click="closeDrawer('showLeft')">
            <text class="word-btn-white">关闭</text>
          </button>
          <view class="formlist">
            <u-form :model="fromAdd" :rules="rules" ref="uForm" label-width="80" labelAlign="left">
              <u-form-item prop="seller" borderBottom ref="item1">
                <view class="lable">交易方</view>
                <u--input v-model="fromAdd.baozhuang" border="none" placeholder="请填写交易方"></u--input>
              </u-form-item>
              <u-form-item prop="model" borderBottom ref="item1">
                <view class="lable">类型</view>
                <u--input v-model="fromAdd.freight" border="none" placeholder="请填写类型"></u--input>
              </u-form-item>
              <u-form-item prop="number" borderBottom ref="item1">
                <view class="lable">金额</view>
                <u--input v-model="fromAdd.ranjiao" border="none" placeholder="请填写金额"></u--input>
              </u-form-item>
              <u-form-item prop="unitPrice" borderBottom ref="item1">
                <view class="lable">是否支付</view>
                <u--input v-model="fromAdd.numberIt" border="none" placeholder="请填写是否支付"></u--input>
              </u-form-item>
              <view class="uni-btn-v" @click="submit('ins')">确认新增</view>
              <!--            <view  v-if="showupd" class="uni-btn-v" @click="submit('upd')">确认修改</view>-->
            </u-form>
            <!--					</u-action-sheet>-->
          </view>
        </view>
      </uni-drawer>
      <uni-drawer ref="showRight" mode="right" :width="320">
        <view class="close">
          <button @click="closeDrawer('showRight')">
            <text class="word-btn-white">关闭</text>
          </button>
          <view class="formlist">
            <u-form :model="fromupdate" :rules="rules" ref="uForm" label-width="80" labelAlign="left">
              <!--            <u-form-item prop="seller" borderBottom ref="item1">-->
              <!--              <view class="lable">交易方</view>-->
              <!--              <u&#45;&#45;input v-model="fromupdate.baozhuang" border="none" placeholder="请填写交易方"></u&#45;&#45;input>-->
              <!--            </u-form-item>-->
              <u-form-item prop="model" borderBottom ref="item1">
                <view class="lable">类型</view>
                <u--input v-model="fromupdate.freight" border="none" placeholder="请填写类型"></u--input>
              </u-form-item>
              <u-form-item prop="number" borderBottom ref="item1">
                <view class="lable">金额</view>
                <u--input v-model="fromupdate.ranjiao" border="none" placeholder="请填写金额"></u--input>
              </u-form-item>
              <u-form-item prop="unitPrice" borderBottom ref="item1">
                <view class="lable">是否支付</view>
                <u--input v-model="fromupdate.numberIt" border="none" placeholder="请填写是否支付"></u--input>
              </u-form-item>
              <!--            <view  v-if="showins" class="uni-btn-v" @click="submit('ins')">确认新增</view>-->
              <view class="uni-btn-v" @click="submit('upd')">确认修改</view>
            </u-form>
            <!--					</u-action-sheet>-->
          </view>
        </view>
      </uni-drawer>
      <view class="uni-container">
        <view class="list" v-for="(item,index) in tableData" :key="index" @click="infor(item)">
          <view>
            <view class="l-i">
						<span class="spanli">
							<view class="li"></view>
							<view>交易方</view>
						</span>：<span style="font-weight: bold;">{{item.baozhuang}}</span>
            </view>
            <view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>类型</view>
						</span>：<span style="color:#F9363A;font-weight: bold;">{{item.freight}}</span></view>
            <view style="display: flex; justify-content: space-between;">
              <view class="l-i"><span class="spanli">
								<view class="li"></view>
								<view>金额</view>
							</span>：{{item.ranjiao}}</view>
            </view>
            <view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>是否支付</view>
						</span>：{{item.numberIt}}</view>

<!--            <view class="">交易方：{{ item.baozhuang }}</view>-->
<!--          </view>-->
<!--          <view class="">类型：{{ item.freight }}</view>-->
<!--          <view class="">金额：{{ item.ranjiao }}</view>-->
<!--          <view class="">是否支付：{{ item.numberIt }}</view>-->
          <view class="uni-group">
            <button class="uni-button" @click="showDrawer2(item,'showRight')" style="margin-left:59%;" size="mini"
                    type="primary">修改
            </button>
            <button class="uni-button" @click="deleteOne(item)" size="mini" type="warn">删除</button>
          </view>
        </view>
        <view class="uni-pagination-box">
          <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
                          :total="total" @change="change"/>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>


<script>
import {
  Costqueryall,
  Costlikeall,
  Costupdate,
  Costdelete,
  Costadd
} from '@/common/api.js'

export default {
  data() {
    return {
      value: '',
      //抽屉
      showLeft: false,
      showRight: false,
      searchVal: '',
      fromData: {
        companyId: ''
      },
      from: {
        companyId: "",
        like: ""
      },
      itemlist: [],
      fromupdate: {},
      fromAdd: {
        ranjiao: "", //染角
        freight: "", //运费
        baozhuang: "", //包装
        numberIt: "" //打号
      },
      tableData: '',
      // 每页数据量
      pageSize: 10,
      // 当前页
      pageCurrent: 1,
      // 数据总量
      total: 0,
      loading: false
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    //监听输入框
    changkeyword(e) {
      console.log(e);
    },
    deleteOne(item) {
      console.log('删除');
      console.log(item);
      this.itemlist[0] = item.id;
      let from = {}
      from.idList = this.itemlist;
      from.seller = item.baozhuang;
      from.companyId = item.companyId;
      from.ranjiao = item.ranjiao;
      uni.showLoading({
        title: '加载中...',
      });
      Costdelete(from).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        this.getData()
      })
    },
    onQuery() {
      console.log(this.value);
      this.from.companyId = uni.getStorageSync('companyId');
      this.from.like = this.value;
      uni.showLoading({
        title: '加载中...',
      });
      Costlikeall(this.from).then((res) => {
        uni.hideLoading();
        console.log('---------------------');
        console.log(res);
        this.tableData = res.data
      })
    },
    submit(but) {
      if (but == 'ins') {
        this.fromAdd.companyId = uni.getStorageSync('companyId');
        uni.showLoading({
          title: '加载中...',
        });
        Costadd(this.fromAdd).then((res) => {
          uni.hideLoading();
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
          this.getData()
        })
      } else {
        uni.showLoading({
          title: '加载中...',
        });
        Costupdate(this.fromupdate).then((res) => {
          uni.hideLoading();
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
          this.getData()
        })
      }

    },
    confirm() {
    },
    // 打开窗口
    showDrawer1(e) {
      this.$refs[e].open()
    },
    showDrawer2(item, e) {
      this.fromupdate = item;
      this.$refs[e].open()

    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },
    // 抽屉状态发生变化触发
    // change(e, type) {
    //   console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
    //   this[type] = e
    // },
    // //输入搜索内容
    // change(e) {
    //   console.log('change', e);
    // },
    // 分页触发
    change(e) {
      this.$refs.table.clearSelection()
      this.selectedIndexs.length = 0
      this.getData(e.current)
    },
    // 搜索
    search() {
      this.getData(1, this.searchVal)
    },
    // 获取数据
    getData() {
      this.loading = true
      this.fromData.companyId = uni.getStorageSync('companyId');
      console.log(this.fromData);
      uni.showLoading({
        title: '加载中...',
      });
      Costqueryall(this.fromData).then((res) => {
        uni.hideLoading();
        console.log(res.data);
        this.loading = false;
        this.tableData = res.data
      })
    },

  },
  onNavigationBarButtonTap(e) {
    if (this.showLeft) {
      this.$refs.showLeft.close()
    } else {
      this.$refs.showLeft.open()
    }
  },
  // app端拦截返回事件 ，仅app端生效
  onBackPress() {
    if (this.showRight || this.showLeft) {
      this.$refs.showLeft.close()
      this.$refs.showRight.close()
      return true
    }
  }
}
</script>


<style>
/* #ifndef H5 */
/* page {
padding-top: 85px;
} */
/* #endif */
.uni-group {
  display: flex;
  align-items: center;
}
.all1 {
  width: 750rpx;
  background-color: #F5F4F4;
  height: 100vh;
  overflow: auto;
}
.spanli {
  color: #046BFB;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.l-i {
  display: flex;
  margin-bottom: 10rpx;
}


.li {
  width: 15rpx;
  height: 15rpx;
  border: 4rpx solid #046BFB;
  border-radius: 50%;
  margin-right: 10rpx;
}

.input {
  padding: 30rpx;
}

.formlist {
  /* margin: 420rpx 30rpx 0 30rpx; */
  /* background-color: white; */
  padding: 30rpx;
  border-radius: 30rpx;
}

.lable {
  font-size: 30rpx;
  font-weight: bold;
}

.uni-btn-v {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #24d4b0;
  color: #fff;
  font-size: 35rpx;
  font-weight: bold;
  border-radius: 30rpx;
  text-align: center;
  margin-top: 30rpx;
}

.list {
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: white;

}
</style>
